
<template>
	<view class="content">
		<button type="default" @tap="showme">我在哪</button>
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="#ffd700">
			<swiper-item v-for="(item,index) in lunboList" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-section title="公交地铁路线查询" sub-title="" type="line">
			<uni-search-bar @confirm="searchCityBus" v-model="searchKey"></uni-search-bar>
			
		</uni-section>
	</view>
	<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 8px; border-radius: 8px;display: flex;justify-content: space-between; padding: 4rpx;align-items: center;">
		<view class="icon" style="width: 100rpx;height: 100rpx;margin-right:5px ; ">
			<image style="width: 100%;height: 100%;" :src="'/static/icons/'+ weatherNow.icon +'.svg'" mode=""></image>
		</view>
		<view class="text" style="font-size: 50rpx;margin-right:200px;">
			{{weatherNow.temp}}°C
		</view>
		<view class="text" style="font-size: 34rpx;margin-left: -300rpx;">
			{{weatherNow.text}}
		</view>
		<view class="text" style=" margin-left: 10rpx;">
			{{weatherNow.windDir}} {{weatherNow.windScale}}级
		</view>
		<view>
			<view class="text" style="margin-left: 0rpx;">
				体感温度： {{weatherNow.feelsLike }}°C
			</view>
			<view class="text" style="margin-left: 0rpx;">
				湿度： {{weatherNow.humidity }}%
			</view>
		</view>
	</view>
	<uni-grid :show-border="false" :column="6" @change="changeGrid">
		
		
		<uni-grid-item v-for="(item,index) in gridData" :index="index" :key="index">
			<view class="grid-item-box" style="background-color: #fff;" @tap="handleGridItemTap(item)">
				<img :src="item.icon" style="width: 20px;">
				<text class="text1">{{item.title}}</text>
			</view>
		</uni-grid-item>
	</uni-grid>
	
	<view class="travel-guide">
		<text class="guide-title">西安，一座穿越千年的历史名城</text>
		<text class="guide-content">
			西安，这座承载着悠悠历史的城市，不仅是十三朝古都的辉煌记忆，更是现代文明与传统文化的完美融合。这里，每一块砖瓦都诉说着千年的故事，每一道菜肴都蕴含着地道的陕味。
		</text>
		<view class="guide-section">
			<text class="section-title">必游景点</text>
			<view class="section-content">
				<text>1. 兵马俑：世界第八大奇迹，探寻秦始皇陵的神秘面纱。</text>
				<text>2. 大雁塔：佛教文化的圣殿，登塔远眺，尽览古都长安的盛世繁华。</text>
				<text>3. 西安城墙：中国现存最完整的古代城垣，骑自行车环游，感受历史的脉动。</text>
				<text>4. 回民街：品味回族文化的独特魅力，肉夹馍、凉皮等地道小吃让人垂涎。</text>
			</view>
		</view>
		<view class="guide-section">
			<text class="section-title">地道美食</text>
			<view class="section-content">
				<text>1. 肉夹馍：外皮香脆，内肉鲜美，被誉为“中国汉堡”的经典。</text>
				<text>2. 凉皮：Q弹的皮质，酸甜适口，是西安夏天的清凉记忆。</text>
				<text>3. 羊肉泡馍：肉质细嫩，泡馍劲道，是冬日里的温暖选择。</text>
			</view>
		</view>
		<view class="guide-section">
			<text class="section-title">交通指南</text>
			<view class="section-content">
				<text>1. 飞机：西安咸阳国际机场，国内外航线密集，便捷出行。</text>
				<text>2. 高铁：西安北站，西北地区的重要交通枢纽，连接全国。</text>
				<text>3. 公交与地铁：市内交通网络发达，覆盖主要景点，出行无忧。</text>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { CONFIG } from '../../utils/config';
	import { userStore } from '../../store/userStore';
	let store = userStore();

	onLoad(() => {
		getLunbo();
		getWeather();
		getPos();
	});
	let lunboList = ref([]);
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/Lunbo");
		console.log(res);
		lunboList.value = res.results;
	}
	let searchKey = ref("");

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜索线路名称",
				icon: "none"
			});
		} else {
			let url = `https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=0`;
			window.location.href = url;
		}
	}

	function getPos() {
		console.log("getpos");
		uni.getLocation({
			success(res) {
				console.log(res);
				store.setPos(res.latitude, res.longitude);
			},
			fail(err) {
				console.log(err);
			}
		});
	}

	function showme() {
		uni.navigateTo({
			url: "/pages/mywebView/mywebView?type=1"
		});
	}
// function tomovie() {
// 		uni.navigateTo({
// 			url: "/pages/hotMovie/hotMovie"
// 		});
// 	}
// 	function tojing() {
// 		uni.navigateTo({
// 			url: "/pages/mywebView/mywebView?type=1"
// 		});
// 	}
// 	function toyun() {
// 		uni.navigateTo({
// 			url: "/pages/mywebView/mywebView?type=1"
// 		});
// 	}
// 	function toyy() {
// 		uni.navigateTo({
// 			url: "/pages/mywebView/mywebView?type=1"
// 		});
// 	}
// 	function tojing2() {
// 		uni.navigateTo({
// 			url: "/pages/mywebView/mywebView?type=1"
// 		});
// 	}
	let weatherNow = ref({});
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		});
		if (res.code == 200) {
			weatherNow.value = res.now;
			console.log(res.now);
		}
	}
		let gridData = [{
				title: '电影',
				icon: 'icon/2.png'
	
			},
			{
				title: '美景',
				icon: 'icon/3.png'
			},
			{
				title: '运势',
				icon: 'icon/4.png'
			},
			{
				title: '天气',
				icon: 'icon/5.png'
			},
			
			{
				title: '公交',
				icon: 'static/icon/gongjiaoche.png'
			}
		]

	

	function changeGrid(e) {
		const index = e.detail.index;
		if (index === 0) { // 假设“电影”是gridData中的第一个元素
			// 直接跳转到爱奇艺电影页面
			window.location.href = 'https://www.iqiyi.com/dianying/';
		} else if (index === 1) {
			// uni.navigateTo({
			// 	url: '/pages/play/play?index=0'
			// });
			window.location.href = 'https://you.ctrip.com/cranking/crankingCity/100001406738.html?allianceid=866656&sid=22313078&seo=0&src=dest.bai.du.ranking';
		} else if (index === 2) {
			// 跳转到运势页面
			window.location.href = 'https://m.k366.com/sxys/';
		}
		else if (index === 3) { 
			// 跳转到运势页面
			window.location.href = 'https://weathernew.pae.baidu.com/weathernew/pc?query=%E9%99%95%E8%A5%BF%E8%A5%BF%E5%AE%89%E5%A4%A9%E6%B0%94&srcid=4982&forecast=long_day_forecast';
		}else if (index === 4) { 
			window.location.href = 'https://map.baidu.com/search/%E8%A5%BF%E5%AE%89%E5%85%AC%E4%BA%A4/@12145253.096656393,4048252.795,11.87z?querytype=con&wd=%E8%A5%BF%E5%AE%89%E5%85%AC%E4%BA%A4&c=233&provider=pc-aladin&pn=0&device_ratio=2&da_src=shareurl';
		}
		// function handleGridItemTap(item) {
		// 	if (item.url.startsWith('http')) {
		// 		window.location.href = item.url;
		// 	} else {
		// 		uni.navigateTo({
		// 			url: item.url
		// 		});
		// 	}
		// }
		}
	</script>


<style>
	
	.content {
		background-color: gold;
	}

	/* 网格容器样式 */
	.uni-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		/* 创建6列 */
		gap: 10px;
		/* 设置网格项之间的间距 */
		padding: 10px;
		/* 容器内边距 */
	}

	/* 网格项样式 */
	.grid-item-box {
		border: 2px solid yellow;
		/* 设置边框颜色 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 5px lemonchiffon;
		/* 添加阴影效果 */
		border-radius: 8px;
		/* 圆角边框 */
		transition: transform 0.3s ease-in-out;
		/* 平滑变换效果 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
	}

	.grid-item-box:hover {

		transform: translateY(-5px);
		/* 鼠标悬停时上移 */
	}

	/* 图标样式 */
	.uni-icons {
		margin-bottom: 10px;
		/* 图标与文本之间的间距 */
	}

	/* 文本样式 */
	.text1 {
		font-size: 14px;
		/* 文本大小 */
		color: #333;
		/* 文本颜色 */
		text-align: center;
		/* 文本居中 */
	}

	.bottom-content {
		background-color: #dcdcdc;

	}

	.travel-guide {
		padding: 15px;
		background-color: lemonchiffon;
		border-top: 1px solid lemonchiffon;
		margin-top: 20px;
		border-radius: 60px;

	}

	.guide-title {
		font-size: 24px;
		color: #333;
		margin-bottom: 10px;
	}

	.guide-content {
		font-size: 16px;
		color: #666;
		line-height: 1.5;
	}

	.guide-section {
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 20px;
		color: #007aff;
		margin-bottom: 10px;
	}

	.section-content {
		font-size: 16px;
		color: #666;
		line-height: 1.5;
	}

	.xian-features {

		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		padding: 10px;
		background-color: #dcdcdc;

	}

	.xian-feature-item {

		flex: 0 0 auto;
		margin-right: 20px;
		text-align: center;
	}

	.xian-feature-item image {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}

	.xian-feature-item text {
		display: block;
		margin-top: 5px;
		font-size: 14px;
	}

	.back-to-top {
		padding: 10px 20px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.back-to-top:hover {
		background-color: #0056b3;
	}

	.guide-title {
		font-family: "Segoe UI", Arial, sans-serif;
		font-weight: 600;
	}

	.section-title {
		font-family: "Segoe UI", Arial, sans-serif;
		font-weight: 600;
	}

	.guide-content {
		font-family: "Segoe UI", Arial, sans-serif;
	}

	.section-content {
		font-family: "Segoe UI", Arial, sans-serif;
	}

	.xian-feature-item text {
		font-family: "Segoe UI", Arial, sans-serif;
	}

	.back-to-top {
		font-family: "Segoe UI", Arial, sans-serif;
	}

	.travel-guide {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border: 1px solid #ccc;
	}

	.xian-features {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border: 1px solid #ccc;
	}

	.xian-feature-item image {
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.back-to-top {
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	@media (max-width: 768px) {
		.xian-features {
			flex-direction: column;
			align-items: center;
		}

		.xian-feature-item {
			margin-bottom: 10px;
		}
	}

	.xian-features {
		transition: all 0.3s ease-in-out;
	}

	.back-to-top {
		transition: all 0.3s ease-in-out;
	}

	.back-to-top:hover {
		transform: translateY(-2px);
	}
</style>